<template>
  <div class="touying-container">
    <JcComboboxVue
      :items="items"
      @change="handelAppend"
      :loading="itmeVComboboxLoading"
      :zmtype="zmtype"
      :zmIds="zmIds"
      @changeType="handelChangeType"
    ></JcComboboxVue>
    <div class="pb-2" style="background-color: #f5f5f5; padding-top: 0px; position: relative">
      <JcSwiperVue
        ref="mySwiper"
        v-show="
          pagePattern == pagePatternEnum['pageTurning'] &&
          (messageType === messageTypeEnum.ZM || messageType === messageTypeEnum.JW)
        "
        @slideChange="onSlideChange"
        @scroll="handleLyricScroll"
        :zhutiTitle="zhutiTitle"
        :zhutiTitleStyle="zhutiTitleStyle"
        :firstSliderBgImg="firstSliderBgImg"
        :createRow="createRow"
        :textStyle="textStyle"
        :title="title"
        :bgImageClass="bgImageClass"
        :textShadow="textShadow"
        :publicStyle="publicStyle"
        :textAlign="textAlign"
        :showTitle="showTitle"
        :shijiName="shijiName"
        :messageType="messageType"
      ></JcSwiperVue>
      <JcAutoPlayLYric
        v-show="pagePattern == pagePatternEnum['autoplay'] && messageTypeEnum.ZM === messageType"
        :zhutiTitleStyle="zhutiTitleStyle"
        :textShadow="textShadow"
        :textStyle="textStyle"
        :bgImageClass="bgImageClass"
        :textAlign="textAlign"
        :currentLyric="currentLyric"
        :clyric="clyric"
      ></JcAutoPlayLYric>
      <gepu v-if="messageType === messageTypeEnum.GP" :gepuUrl="gepuUrl" @change="handleGePuChange" />
      <div>
        <!-- 字号加减快捷设置 -->
        <v-expansion-panels v-if="messageType !== messageTypeEnum.GP" multiple :value="expansionPpanelsActives">
          <v-expansion-panel>
            <v-expansion-panel-header>
              实验性功能
              <template v-slot:actions>
                <j-icon color="#757575" size="20">向下按钮</j-icon>
              </template>
            </v-expansion-panel-header>
            <v-expansion-panel-content>
              <div class="px-5 d-flex align-center" style="flex-wrap: wrap; row-gap: 10px; column-gap: 10px">
                <v-btn aria-label="播放按钮" v-if="src" color="primary" @click="play">
                  自动播放歌词
                  <j-icon :size="25" color="#ffffff">{{ playView.playstate }}</j-icon>
                </v-btn>

                <!-- <v-btn

                  aria-label="显示或隐藏序号和标题"
                color="primary" @click="handleShowTitle" >
                {{ showTitle?'关闭序号和标题':'显示序号和标题' }}

                </v-btn> -->
              </div>
            </v-expansion-panel-content>
          </v-expansion-panel>
          <v-expansion-panel>
            <v-expansion-panel-header>
              <div style="display: flex; align-items: center">
                <div>快捷操作</div>
                <div style="line-height: 30px">
                  字号：
                  <button @click.stop="handleQuickSeting('fontSize', 'plus')" class="mr-2" small>
                    <j-icon size="18" color="#757575">mdi-plus</j-icon></button
                  >{{ fontSize }}
                  <button style="margin-left: 6px" small @click.stop="handleQuickSeting('fontSize', 'minus')">
                    <j-icon :size="plusIconSize" color="#757575">mdi-minus</j-icon>
                  </button>
                </div>
              </div>

              <template v-slot:actions>
                <j-icon color="#757575" size="20">向下按钮</j-icon>
              </template>
            </v-expansion-panel-header>
            <v-expansion-panel-content>
              <div style="display: flex; flex-wrap: wrap; padding: 5px; border: 1px solid gray">
                <div class="px-2 f-c">
                  字号：<button @click="handleQuickSeting('fontSize', 'plus')" class="mr-2" small>
                    <j-icon :size="plusIconSize" color="#757575">mdi-plus</j-icon></button
                  >{{ fontSize }}
                  <button small @click="handleQuickSeting('fontSize', 'minus')">
                    <j-icon :size="plusIconSize" color="#757575">mdi-minus</j-icon>
                  </button>
                </div>
                <div class="px-2 f-c">
                  行高：<button class="mr-2" @click="handleQuickSeting('lineHeight', 'plus')" small>
                    <j-icon :size="plusIconSize" color="#757575">mdi-plus</j-icon></button
                  >{{ lineHeight }}
                  <button @click="handleQuickSeting('lineHeight', 'minus')" small>
                    <j-icon :size="plusIconSize" color="#757575">mdi-minus</j-icon>
                  </button>
                </div>
                <div class="px-2 f-c">
                  行数：<button class="mr-2" @click="handleQuickSeting('rows', 'plus')" small>
                    <j-icon :size="plusIconSize" color="#757575">mdi-plus</j-icon></button
                  >{{ rows }}
                  <button @click="handleQuickSeting('rows', 'minus')" small>
                    <j-icon :size="plusIconSize" color="#757575">mdi-minus</j-icon>
                  </button>
                </div>
              </div>
            </v-expansion-panel-content>
          </v-expansion-panel>
          <v-expansion-panel>
            <v-expansion-panel-header>
              快速选择
              <div class="mx-2">
                <v-btn @click.stop="handleAddQuickOption" small elevation="0">
                  添加<j-icon :size="plusIconSize" color="#757575">mdi-plus</j-icon>
                </v-btn>
              </div>
              <template v-slot:actions>
                <j-icon color="#757575" size="20">向下按钮</j-icon>
              </template>
            </v-expansion-panel-header>
            <v-expansion-panel-content>
              <div class="">
                <div class="mb-2 flex" style="column-gap: 6px; row-gap: 12px">
                  <v-btn class="ml-2" @click.stop="handleAddQuickOption" small elevation="0">
                    添加<j-icon :size="plusIconSize" color="#757575">mdi-plus</j-icon>
                  </v-btn>
                  <span class="mx-2">共{{ quickOptions.length }}首</span>
                  <v-btn @click="handleAddQuickOptionHelp" small elevation="0">
                    <j-icon size="18" color="#757575">mdi-help</j-icon>
                  </v-btn>

                  <v-btn class="ml-2" small @click="copyQuick">复制题目和序号</v-btn>
                </div>

                <div
                  style="
                    display: flex;
                    flex-wrap: nowrap;
                    padding: 5px;
                    border: 1px solid gray;
                    overflow-x: auto;
                    min-height: 58px;
                  "
                >
                  <div style="display: flex; flex-wrap: nowrap">
                    <div v-for="item in quickOptions" :key="item._id">
                      <v-chip
                        v-if="item.show"
                        class="ma-2"
                        :color="item.selected ? 'green' : 'red'"
                        text-color="white"
                        @click.stop="handleQuickOptionClick(item)"
                      >
                        <div class="flex items-center">
                          <div>
                            {{ item.title }}
                          </div>
                          <v-btn @click.stop="handleQuickOptionClose(item)" text icon left style="margin-left: 10px">
                            <j-icon size="10">mdi-close</j-icon>
                          </v-btn>
                        </div>
                      </v-chip>
                    </div>
                  </div>
                </div>
              </div>
            </v-expansion-panel-content>
          </v-expansion-panel>

          <v-expansion-panel>
            <v-expansion-panel-header>
              歌词缩略图
              <template v-slot:actions>
                <j-icon color="#757575" size="20">向下按钮</j-icon>
              </template>
            </v-expansion-panel-header>
            <v-expansion-panel-content>
              <v-row>
                <JcThumbnailVue
                  :firstSliderBgImg="firstSliderBgImg"
                  :swiperActiveSliderIndex="pageIndex"
                  :zhutiTitle="zhutiTitle"
                  :createRow="createRow"
                  :title="title"
                  :thTextStyle="thTextStyle"
                  :thZhutiTitleStyle="thZhutiTitleStyle"
                  :bgImageClass="bgImageClass"
                  :textShadow="textShadow"
                  @change="swiperToIndex"
                  :textAlign="textAlign"
                  :publicStyle="publicStyle"
                />
              </v-row>
            </v-expansion-panel-content>
          </v-expansion-panel>
        </v-expansion-panels>
      </div>
    </div>

    <v-navigation-drawer app v-model="settingVisable" class="mb-2">
      <JcSettingVue
        @close="settingVisable = false"
        v-model:firstSliderBgImg="firstSliderBgImg"
        v-model:zhutiTitle="zhutiTitle"
        v-model:rows="rows"
        v-model:lineHeight="lineHeight"
        v-model:fontSize="fontSize"
        v-model:titleFontSize="titleFontSize"
        v-model:fontColor="fontColor"
        v-model:bgColor="bgColor"
        v-model:bgImageClass="bgImageClass"
        v-model:textShadow="textShadow"
        v-model:textStorkeColor="textStorkeColor"
        v-model:textStorkeWidth="textStorkeWidth"
        v-model:textAlign="textAlign"
      />
    </v-navigation-drawer>
    <div class="btn-group">
      <!-- 连接码配置begin -->
      <JcInitConfigModelVue class="mb-2" ref="jicfRef" @submit="handleKeyInput" />
      <!-- 连接码配置end -->
      <!-- 设置 begin -->
      <v-btn class="setting-btn mb-2" icon color="purple" @click="settingVisable = !settingVisable">
        <j-icon color="rgb(229, 115, 115)">mdi-settings</j-icon></v-btn
      >
      <!-- 设置 end -->
      <!-- 使用说明begin -->
      <JcHelpVue class="mb-5">
        <template v-slot:activator="{ on, attrs }">
          <v-btn class="help-btn" v-bind="attrs" v-on="on" icon color="purple">
            <j-icon color="rgb(229, 115, 115)">mdi-help</j-icon></v-btn
          >
        </template>
      </JcHelpVue>
      <!-- 使用说明end -->
      <JcProSetting :fangYingUrl="fangYingUrl" class="mb-5">
        <template v-slot:activator="{ on, attrs }">
          <v-btn class="help-screen" v-bind="attrs" v-on="on" icon color="purple">
            <j-icon color="rgb(229, 115, 115)" size="20"> projector-screen</j-icon>
          </v-btn>
        </template>
      </JcProSetting>
    </div>
  </div>
</template>
<script>
import { mapActions, mapGetters } from "vuex";
import JcComboboxVue from "./components/JcCombobox.vue";
import JcSwiperVue from "./components/JcSwiper.vue";
import JcThumbnailVue from "./components/JcThumbnail.vue";
import JcSettingVue from "./components/JcSetting.vue";
import JcHelpVue from "./components/JcHelp.vue";
import JcProSetting from "./components/jcProScreen.vue";
import JcInitConfigModelVue from "./components/JcInitConfigModel.vue";
import { getSgbItem } from "@/api/cloudbase-sgbedit";

import JcAutoPlayLYric from "./components/JcAutoPlayLyric.vue";
import JcJwTypeSwiper from "./components/JcJwTypeSwiper.vue";
import JcGePuTouYing from "./components/JcGePuTouYing.vue";
// import { update } from "@/api/cloudbase-touying";
// import "swiper/css/swiper.css";
import "./index.css";
import CONFIG, { pagePatternEnum, messageType as messageTypeEnum } from "./config";
import { copyText } from "@/utils/utils";
import mqttMinis from "./mqttMinis";
// 赞美和经文切换的时候记录一下过去的旧值，在切换回赞美的时候在复回。
let oldRows = 4;
export default {
  name: "TouYingIndex",
  mixins: [mqttMinis],
  props: {
    id: {
      type: String,
      default: "",
    },
  },
  data() {
    return {
      src: "",
      settingVisable: false,
      pageId: "", // 页面的ID 值为用户的uid
      items: [],
      itmeVComboboxLoading: false,
      fangYingUrl: "",
      zmtype: [],
      currentItem: null,
      // 配置项
      ...CONFIG,
      scrollLyric: [],
      pagePatternEnum,
      expansionPpanelsActives: [1, 3],
      plusIconSize: 16,
      messageTypeEnum,
    };
  },
  components: {
    gepu: JcGePuTouYing,

    JcJwTypeSwiper,
    JcComboboxVue,
    JcSwiperVue,
    JcThumbnailVue,
    JcSettingVue,
    JcHelpVue,
    JcProSetting,
    JcInitConfigModelVue,
    JcAutoPlayLYric,
  },
  mounted() {
    this.$store.dispatch("sgb/getAllShiJiList").then((type) => {
      this.zmtype = type.map((item) => ({
        index: item.id,
        shijiName: item.name,
      }));
    });
  },
  async activated() {
    if (this.pageId === "") {
      if (this.id !== "") {
        this.pageId = this.id;
        await this.initConfig();
        this.$refs.jicfRef.show(this.pageId);
        await this.init();
        return;
      }
      const id = localStorage.getItem("touyingId");

      console.log("获取到的预存的值-->", id);
      if (id) {
        console.log("弹");
        this.$refs.jicfRef.show(id);
      } else {
        this.$refs.jicfRef.show();
      }
    }
    await this.init();
    // window.addEventListener('beforeunload', this.beforeunload)
  },
  async deactivated() {
    this.onDeactivated();
    // window.removeEventListener('beforeunload', this.beforeunload)
  },

  methods: {
    async init() {
      try {
        await this.getZanMeiData();
        return Promise.resolve();
      } catch (e) {
        this.$toast.info("出错啦");
        console.log("err=>", e);
        this.itmeVComboboxLoading = false;
        return Promise.reject();
      }
    },
    ...mapActions({
      zmType: "sgb/zmTypeCom",
      getzaimeiType: "sgb/getzaimeiType",
      selectLyric: "audio/selectLyric",
    }),
    play() {
      // 播放和暂停方法
      if (this.audio.paused) {
        this.audio.src = this.src;
        this.pagePattern = pagePatternEnum.autoplay;
        this.audio.play();
      } else {
        this.pagePattern = pagePatternEnum.pageTurning;
        this.audio.pause();
      }
    },
    handelAppend(model) {
      this.messageType = model.messageType;
      switch (model.messageType) {
        case messageTypeEnum.ZM:
        case messageTypeEnum.GP:
          this.selectZmChange(model);
          break;

        case messageTypeEnum.JW:
          this.selectJwChange(model);
          break;
      }
      this.drawer = false;
    },
    selectZmChange(model) {
      // 给audio对像一个当前的信息
      this.$store.commit("audio/setInfo", model);
      this.selectLyric(model._id);
      // 拦截不住自动播放，就多次执行暂停
      this.audio.pause();
      if (model.dmtUrl.adUrl) {
        this.src = model.dmtUrl.adUrl;
        // this.audio.src = model.dmtUrl.adUrl;
        this.audio.pause();
      } else {
        this.src = "";
      }

      this.currentItem = model;
      this.lyric = model.lyric;
      this.title = model.title;
      this.shijiName = model.shijiName;
      this.gepuUrl = model.dmtUrl.gepuUrl;
      this.createScrollLyric();
      this.zmIds = model._id;
      this.update(this.pageId, {
        field: "zmIds",
        value: model._id,
      })
        .then((res) => {
          this.pageIndex = 0;
          this.swiperToIndex(0);
        })
        .catch((err) => {
          console.log("追加失败", err);
        });
    },
    selectJwChange(model) {
      this.lyric = model.longtextarr;
      this.shijiName = "";
      this.title = model.text;
      this.currentItem = model;
      this.update(this.pageId, {
        field: "longtextarr",
        value: model.longtextarr,
      });
    },
    onSlideChange(activeIndex) {
      this.pageIndex = activeIndex;
    },
    swiperToIndex(index) {
      this.$refs.mySwiper.swiper.slideTo(index, 0);
    },
    async onDeactivated() {
      this.update(this.pageId, {
        field: "qrisShow",
        value: true,
      });
      this.pageId = "";
      this.destroyConnection();
    },
    async getZanMeiData() {
      try {
        this.itmeVComboboxLoading = "#fff";
        const sgbitems = await getSgbItem(10000, 1);
        // console.log('sgbitems-->', sgbitems);
        this.items = sgbitems.data.map((i) => {
          i.xuhao = i.xuhao.toString().padStart(3, "0");
          i.title = `${i.xuhao}.${i.mulu}`;
          return i;
        });
        // this.zmtype = await this.getzaimeiType()
        this.itmeVComboboxLoading = false;
        return Promise.resolve();
      } catch (e) {
        this.$toast.info("请求数据出错");
        return Promise.reject(e);
      }
    },
    async initConfig() {
      try {
        // 初始化页面样式和数据
        // this.update(this.pageId, {
        //   field: 'qrisShow',
        //   value: false,
        // })
        // const configsRes = await get(this.pageId)
        // const configs = configsRes.data[0]
        this.fangYingUrl = `${window.location.protocol}//${window.location.host}/#/fangying/${this.pageId}`;
      } catch (e) {
        this.$toast.info("连接失败");
      }
    },
    async handleKeyInput(code) {
      this.pageId = code;
      localStorage.setItem("touyingId", code);
      this.createConnection({
        onConnect: () => this.doSubscribe(code), //
        onMessage: (messge) => this.onMessage(messge),
      });
      this.initConfig();
    },
    beforeunload(e) {
      // Cancel the event as stated by the standard.
      e.preventDefault();
      // Chrome requires returnValue to be set.
      e.returnValue = "";
      // update(this.pageId, {
      //   field: "qrisShow",
      //   value: true,
      // });
      confirm("非法离开，导致连接异常，请重新输入连接码");
    },
    handleQuickSeting(setAry, type) {
      let setp = 2;
      if (setAry === "rows") {
        setp = 1;
      }
      switch (type) {
        case "plus":
          this[`${setAry}`] += setp;
          return;
        case "minus":
          this[`${setAry}`] -= setp;
          break;
      }
    },
    handleAddQuickOption() {
      if (!this.currentItem) {
        this.$toast.info("请在上面的选择器中选择要加入快捷选项的赞美哦！");
        return;
      }
      let pushItem = {};
      if (this.messageType === messageTypeEnum.ZM) {
        if (this.quickOptions.filter((item) => item._id === this.currentItem._id).length > 0) {
          this.$toast.info("这首赞美已经在快捷选项中了！");
          return;
        }
        pushItem = {
          ...this.currentItem,
          show: true,
          selected: false,
        };
      }

      if (this.messageType === messageTypeEnum.JW) {
        pushItem = {
          ...this.currentItem,
          show: true,
          selected: false,
          title: this.currentItem.text,
        };
      }

      this.quickOptions.push(pushItem);
    },
    handleQuickOptionClick(model) {
      this.quickOptions = this.quickOptions.map((item) => {
        if (item._id === model._id) {
          item.selected = true;
        } else {
          item.selected = false;
        }
        return item;
      });
      this.handelAppend(model);
    },
    handleQuickOptionClose(model) {
      if (!model.messageType || model.messageType === messageTypeEnum.ZM) {
        this.quickOptions = this.quickOptions.filter((item) => item._id !== model._id);
      }
      if (model.messageType === messageTypeEnum.JW) {
        this.quickOptions = this.quickOptions.filter((item) => item.text !== model.text);
      }
    },

    handleAddQuickOptionHelp() {
      this.$toast.info("请在上面的选择器中选择要加入快捷选项的赞美，点击左加的+号进行添加！");
    },
    // 生成歌词数组
    createScrollLyric() {
      if (this.lyric === "") {
        return [];
      }

      this.scrollLyric = this.lyric
        .split("\n")
        .filter((i) => !(i == ""))
        .filter((i) => !/^\r$/.test(i))
        .map((item, index) => ({
          text: item,
          index,
          selected: false,
        }));
      this.scrollLyric.unshift(this.title);
    },
    handleLyricScroll(progress) {
      console.log("progress-->", progress);
      this.scrollProgress = progress;
    },
    onMessage(message) {
      if (message) {
        if (message.username === this.mqttOptions.username) {
          console.log("收到自己的消息");
          return;
        }

        setTimeout(() => {
          console.log("进行了重置--》");
          this.resetConfig(message);
        }, 1000);

        return;
      }
      this.resetConfig(CONFIG);
    },
    resetConfig(configs) {
      if (!configs) {
        configs = CONFIG;
      }
      console.log("重置的config1-->", configs);
      this.rows = configs.rows || this.rows;
      this.fontSize = configs.fontSize || this.fontSize;
      this.lineHeight = configs.lineHeight || this.lineHeight;
      this.pageIndex = configs.pageIndex || this.pageIndex;
      // setTimeout(() => this.swiperToIndex(this.pageIndex), 1000)
      this.zhutiTitle = configs.zhutiTitle || this.zhutiTitle;
      this.titleFontSize = configs.titleFontSize || this.titleFontSize;
      this.firstSliderBgImg = configs.firstSliderBgImg || this.firstSliderBgImg;
      this.zmIds = configs.zmIds || this.zmIds;
      this.fontColor = configs.fontColor || this.fontColor;
      this.bgColor = configs.bgColor || this.bgColor;
      document.documentElement.style.setProperty("--touying-bg-color", this.bgColor);
      this.bgImageClass = configs.bgImageClass || this.bgImageClass;
      this.textShadow = configs.textShadow || this.textShadow;
      this.textAlign = configs.textAlign || this.textAlign;
      this.textStorkeWidth = configs.textStorkeWidth || this.textStorkeWidth;
      this.textStorkeColor = configs.textStorkeColor || this.textStorkeColor;
      this.quickOptions = configs.quickOptions || [];
      if (typeof configs.pagePattern === "boolean") {
        this.pagePattern = pagePatternEnum.pageTurning;
      } else {
        this.pagePattern = configs.pagePattern || pagePatternEnum.pageTurning;
      }

      this.showTitle = configs.showTitle || false;
      this.shijiName = configs.shijiName || "";
    },
    handleShowTitle() {
      this.showTitle = !this.showTitle;
    },
    copyQuick() {
      const copytext = this.quickOptions
        .map((item) => {
          const str = `${item.shijiName}-${item.title}\n\r`;
          return str;
        })
        .join("\r");

      copyText(copytext);
    },
    handelChangeType(value) {
      this.messageType = value;
      this.swiperToIndex(0);
      if (value === this.messageTypeEnum.JW) {
        oldRows = this.rows;
        this.rows = 1;
      } else {
        this.rows = oldRows;
      }
    },
    handleGePuChange(data) {
      this.gepuOptions = data;
    },
  },
  computed: {
    ...mapGetters(["playView", "playIconText", "audio", "t", "currentLyric", "clyric"]),
    quickOptionsCurrintSelectedTitle() {
      const s = this.quickOptions.filter((item) => item.selected);
      if (s.length > 0) {
        return s[0].title;
      }
      return "";
    },

    // 生成行和列
    createRow() {
      if (this.lyric === "") {
        return [];
      }
      const textrows = this.lyric.split("\n").filter((i) => !(i == "" || /^\r$/.test(i)));
      let tmp = [];
      const rows = [];
      textrows.forEach((t, i) => {
        if (i % this.rows === 0 && tmp.length > 0) {
          rows.push(tmp);
          tmp = [];
        }
        tmp.push(t);
      });
      rows.push(tmp);
      return rows;
    },
    publicStyle() {
      return `-webkit-text-stroke-color:${this.textStorkeColor};-webkit-text-stroke-width:${this.textStorkeWidth}px;text-align:${this.textAlign}`;
    },
    textStyle() {
      return {
        fontSize: `${this.fontSize * 0.2}px`,
        lineHeight: `${this.lineHeight * 0.2}px`,
        color: this.fontColor,
      };
    },
    thTextStyle() {
      return {
        fontSize: `${this.titleFontSize * 0.1}px`,
        lineHeight: `${this.lineHeight * 0.1}px`,
        color: this.fontColor,
      };
    },
    zhutiTitleStyle() {
      return {
        fontSize: `${this.titleFontSize * 0.2}px`,
        lineHeight: `${this.lineHeight * 0.2}px`,
        color: this.fontColor,
      };
    },
    thZhutiTitleStyle() {
      return {
        fontSize: `${this.titleFontSize * 0.1}px`,
        lineHeight: `${this.lineHeight * 0.1}px`,
        color: this.fontColor,
      };
    },
    zmtypeCreate() {
      if (this.zmtype.length === 0) {
        return "";
      }
      return (id) => this.zmtype.filter((item) => item.index === id)[0].shiJiName;
    },
  },
  watch: {
    showTitle() {
      this.update(this.pageId, {
        field: "showTitle",
        value: this.showTitle,
      });
    },
    rows() {
      this.update(this.pageId, {
        field: "rows",
        value: this.rows,
      });
    },
    fontSize() {
      this.update(this.pageId, {
        field: "fontSize",
        value: this.fontSize,
      });
    },
    lineHeight() {
      this.update(this.pageId, {
        field: "lineHeight",
        value: this.lineHeight,
      });
    },
    zhutiTitle() {
      this.update(this.pageId, {
        field: "zhutiTitle",
        value: this.zhutiTitle,
      });
    },
    titleFontSize() {
      this.update(this.pageId, {
        field: "titleFontSize",
        value: this.titleFontSize,
      });
    },
    firstSliderBgImg() {
      this.update(this.pageId, {
        field: "firstSliderBgImg",
        value: this.firstSliderBgImg,
      });
    },
    fontColor() {
      this.update(this.pageId, {
        field: "fontColor",
        value: this.fontColor,
      });
    },
    bgColor() {
      this.update(this.pageId, {
        field: "bgColor",
        value: this.bgColor,
      });
    },
    bgImageClass() {
      this.update(this.pageId, {
        field: "bgImageClass",
        value: this.bgImageClass,
      });
    },
    textShadow() {
      this.update(this.pageId, {
        field: "textShadow",
        value: this.textShadow,
      });
    },
    textStorkeWidth() {
      this.update(this.pageId, {
        field: "textStorkeWidth",
        value: this.textStorkeWidth,
      });
    },
    textStorkeColor() {
      this.update(this.pageId, {
        field: "textStorkeColor",
        value: this.textStorkeColor,
      });
    },
    textAlign() {
      this.update(this.pageId, {
        field: "textAlign",
        value: this.textAlign,
      });
    },
    quickOptions() {
      this.update(this.pageId, {
        field: "quickOptions",
        value: this.quickOptions,
      });
    },
    scrollProgress() {
      this.update(this.pageId, {
        field: "scrollProgress",
        value: this.scrollProgress,
      });
    },
    pagePattern() {
      this.update(this.pageId, {
        field: "pagePattern",
        value: this.pagePattern,
      });
    },
    pageIndex() {
      this.update(this.pageId, {
        field: "pageIndex",
        value: this.pageIndex,
      });
    },
    currentLyric() {
      const { currentLyric } = this;
      this.update(this.pageId, {
        field: "currentLyric",
        value: currentLyric,
      });
    },
    clyric() {
      const { clyric } = this;
      this.update(this.pageId, {
        field: "clyric",
        value: clyric,
      });
    },
    messageType() {
      this.update(this.pageId, {
        field: "messageType",
        value: this.messageType,
      });
    },
    gepuUrl() {
      this.update(this.pageId, {
        field: "gepuUrl",
        value: this.gepuUrl,
      });
    },
    gepuBase64() {
      this.update(this.pageId, {
        field: "gepuBase64",
        value: this.gepuBase64,
      });
    },
    gepuOptions() {
      this.update(this.pageId, {
        field: "gepuOptions",
        value: this.gepuOptions,
      });
    },
  },
};
</script>
<style scoped>
.btn-group {
  position: fixed;
  bottom: 10px;
  right: 10px;
  z-index: 1000;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
}

.touying-container >>> .v-main {
  padding: 0px !important;
}

.f-c {
  display: flex;
  align-items: center;
  column-gap: 10px;
}
</style>
